<template>
  <div class="page-view">
    <div class="form">
      <van-field
        v-model="mobile"
        type="tel"
        maxlength="11"
        autocomplete="off"
        placeholder="请输入手机号"
        class="login-form login-phone"
      />
      <div class="verification-code">
        <van-field
          v-model="code"
          type="tel"
          autocomplete="off"
          placeholder="请输入验证码"
          class="login-form login-code"
        />
        <van-button
          v-show="sendVerificationCode"
          class="get-code"
          :disabled="getCodeDisabled"
          @click="onGetVerificationCode"
        >
          获取验证码
        </van-button>
        <span
          v-show="!sendVerificationCode"
          class="get-code"
        >
          {{ getTime }}秒后重新获取
        </span>
      </div>
      <div class="login-form-password">
        <van-field
          v-model="pwd"
          :type="seePassword"
          autocomplete="off"
          placeholder="请输入密码"
          class="login-form login-password"
        />
        <img
          v-if="seePassword === 'text' && pwd === ''"
          src="~assets/login/see_no_password.png"
          class="control-see"
          @click="onChangeType"
        >
        <img
          v-if="seePassword === 'text' && pwd !== ''"
          src="~assets/login/see_password.png"
          class="control-see"
          @click="onChangeType"
        >
        <img
          v-if="seePassword === 'password' && pwd === ''"
          src="~assets/login/no_see_gray.png"
          class="control-see no-see"
          @click="onChangeType"
        >
        <img
          v-if="seePassword === 'password' && pwd !== ''"
          src="~assets/login/no_see.png"
          class="control-see no-see"
          @click="onChangeType"
        >
      </div>
      <van-button
        size="large"
        class="login-button"
        @click="validateForm"
      >
        提交
      </van-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import md5 from 'md5'
import { MOBILE_STR, PWD_REG_STR, PWD_TIP } from '@/lib/reg'
import { LOGIN } from '@/store/mutations'
const phoneReg = new RegExp(MOBILE_STR)
const pwdReg = new RegExp(PWD_REG_STR)
export default Vue.extend({
  data () {
    return {
      mobile: '',
      code: '',
      pwd: '',
      seePassword: 'password',
      sendVerificationCode: true, // 获取验证码/n秒后重新获取文案
      getTime: 0, // 获取验证码时间
      clickGetCodeBtn: false,
      getCodeDisabled: false,
    }
  },
  created () {
  },
  methods: {
    // 获取验证码
    onGetVerificationCode () {
      if (this.mobile === '') {
        this.$toast('手机号不能为空！')
      } else if (!phoneReg.test(this.mobile)) {
        this.$toast('手机号格式错误！')
      } else {
        this.getCodeDisabled = true
        this.$axios({
          url: 'account/GetWebPhoneIdentifyCodeForH5',
          data: {
            'Phone': this.mobile,
            'Mark': 0,
          },
        }, 1).then(res => {
          if (res === 0) {
            this.clickGetCodeBtn = true
            this.$toast('验证码发送成功！')
            this.sendVerificationCode = false
            this.getTime = 60
            let getCodeTime = setInterval(() => {
              this.getTime--
              if (this.getTime <= 0) {
                this.sendVerificationCode = true
                this.getCodeDisabled = false
                clearInterval(getCodeTime)
              }
            }, 1000)
          } else {
            // this.$toast('请输入未注册的手机号')
          }
        }, e => {
          this.$toast(e.message)
          this.getCodeDisabled = false
        })
      }
    },
    // 验证表单
    validateForm () {
      if (this.mobile === '') {
        this.$toast('手机号不能为空！')
      } else if (!phoneReg.test(this.mobile)) {
        this.$toast('手机号格式错误！')
      } else if (this.code === '') {
        this.$toast('验证码不能为空！')
      } else if (this.clickGetCodeBtn) {
        if (this.pwd === '') {
          this.$toast('密码不能为空！')
        } else if (!pwdReg.test(this.pwd)) {
          this.$toast(PWD_TIP)
        } else {
          this.onSubmit()
        }
      } else {
        this.$toast('请输入获取的验证码！')
      }
    },
    onSubmit () {
      let password = md5(this.pwd)
      this.$axios({
        url: 'account/FindPwdForH5',
        data: {
          Phone: this.mobile,
          Code: this.code,
          PassWord: password,
        },
      }).then(res => {
        if (!res) {
          if (this.$route.name === 'retrievePassword') {
            const fromPage = sessionStorage.getItem('loginFromPage')
            if (fromPage) {
              let redirectInfo = {
                from: 'home',
                query: {},
              }
              redirectInfo = JSON.parse(fromPage)
              sessionStorage.removeItem('loginFromPage')
              this.onLogin(redirectInfo)
            } else {
              this.$router.push({ name: 'login' })
            }
          } else {
            this.$emit('chgComp', 'LoginForm')
          }
          this.$toast('恭喜你，修改成功！')
        } else {
          this.$toast(res)
        }
      }, e => {
        this.$toast(e.message)
      })
    },
    // 找回密码后自动登录
    onLogin (redirectInfo?: any) {
      this.$store.dispatch(LOGIN, {
        userName: this.mobile,
        pwd: this.pwd,
      }).then(res => {
        if (redirectInfo) {
          const { from, query } = redirectInfo
          this.$router.replace({ name: from as string, query })
        }
      }, e => {
        this.$toast(e.message)
      })
    },
    // 切换 是否显示密码图片
    onChangeType () {
      this.seePassword = this.seePassword === 'password' ? 'text' : 'password'
    },
  },
})
</script>
<style lang="scss" scoped>
@import "~scss/login/loginPage.scss";
@import "~scss/login/login.scss";
.form {
  padding-top: 160px;
}
.login-password {
  margin-bottom: 255px;
}
</style>
